<script setup>
import router from '@/router'

import axios from 'axios'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

import RouterCardButtonComponent from '../components/RouterCardButtonComponent.vue'
import IndexListView from '@/views/IndexListView.vue'

const route = useRoute()

const selectedIndex = ref(0)
const id = ref(route.params.id || null)

if (!id.value) {
  router.push({ name: 'index', params: { id: 0 } })
}

function onChange(index) {
  console.log('onChange', index)

  selectedIndex.value = index
  router.push({ name: 'index', params: { id: index } })
}

const testData = ref([])

onMounted(async () => {
  try {
    const response = await axios.get('/test.json')
    testData.value = response.data
  } catch (error) {
    console.error('Error fetching data:', error)
  }
})
</script>

<template>
  <!-- Banner -->
  <div class="block text-center" m="t-4">
    <el-carousel trigger="click" height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small justify-center" text="2xl">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>

  <!-- Buttons -->
  <el-row class="row-bg" justify="space-evenly">
    <el-col v-for="(item, index) in testData" :key="index" :span="6">
      <RouterCardButtonComponent
        :title="item.title"
        @click="onChange(index)"
        :selected="selectedIndex == index"
      />
    </el-col>
  </el-row>

  <!-- Content Views -->
  <IndexListView :data="testData[selectedIndex]?.list" />
</template>

<style scoped>
/* Banner */
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* Buttons */
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
